<template>
  <div class='container'>
    <!-- 路由有参数 -->
    <el-card v-if="id">
      <!-- 面包屑 -->
      <el-breadcrumb style="margin-bottom:20px" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{path:'/subjects/list'}">学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{name}}</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>
      <!-- 标签上头 -->
      <el-row>
        <el-col :span="13">
          <el-row>
            <el-form ref="form" :model="form">
              <el-col :span="9">
                <el-form-item label="标签名称" label-width="75px">
                  <el-input v-model="form.tagName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="状态" label-width="75px">
                  <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label-width="10px">
                  <el-button size="medium" @click="clearFn">清除</el-button>
                  <el-button size="medium" type="primary" @click="searchValue">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </el-col>
        <el-col :span="11" style="display:flex;justify-content:space-between;">
          <el-col :span="15"></el-col>
          <el-col :span="4">
            <el-button type="text" style="font-size:16px" @click="formFn">←返回学科</el-button>
          </el-col>
          <el-col :span="5">
            <el-button type="success" icon="el-icon-edit" class="btn-right" @click="addShowDialog">新增标签</el-button>
          </el-col>
        </el-col>
      </el-row>
      <!-- 消息提示 -->
      <el-alert :title="title" type="info" :closable="false" show-icon>
      </el-alert>
      <!-- table表格 -->
      <div class="table-box">
        <el-table :data="tableDataTwo" style="width: 100%">
          <el-table-column label="序号" type="index" :index="indexMethod" width="50">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科" width="180">
          </el-table-column>
          <el-table-column prop="tagName" label="标签名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者">
          </el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="220">
            <template slot-scope="{row}">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="{row}">
              {{row.state===1 ? '启用' : '禁用'}}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{row}">
              <el-button type="text" @click="handleStatus(row)">{{row.state===1 ? '禁用' : '启用'}}</el-button>
              <el-button ref="editBtn" :disabled="row.state===1" type="text" @click="handleEdit(row)">修改</el-button>
              <el-button ref="delBtn" :disabled="row.state===1" type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="paginationcss">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pagesize" layout="total" :total="totals">
          </el-pagination>
        </div>

      </div>
    </el-card>

    <!-- 路由没有参数 -->
    <el-card  v-else>
      <!-- 标签上头 -->
      <el-row>
        <el-col :span="13">
          <el-row>
            <el-form ref="form" :model="form">
              <el-col :span="9">
                <el-form-item label="标签名称" label-width="75px">
                  <el-input v-model="form.tagName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="状态" label-width="75px">
                  <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label-width="10px">
                  <el-button size="medium" @click="clearFn">清除</el-button>
                  <el-button size="medium" type="primary" @click="searchValue">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </el-col>
        <el-col :span="11" style="display:flex;justify-content:space-between;">
          <el-col :span="19"></el-col>
          <el-col :span="5">
            <el-button type="success" icon="el-icon-edit" class="btn-right" @click="addShowDialog">新增标签</el-button>
          </el-col>
        </el-col>
      </el-row>
      <!-- 消息提示 -->
      <el-alert :title="title" type="info" :closable="false" show-icon>
      </el-alert>
      <!-- table表格 -->
      <div class="table-box"  v-loading="isLoading">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="序号" type="index" :index="indexMethod" width="50">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科" width="180">
          </el-table-column>
          <el-table-column prop="tagName" label="标签名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者">
          </el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="220">
            <template slot-scope="{row}">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="{row}">
              {{row.state===1 ? '启用' : '禁用'}}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{row}">
              <el-button type="text" @click="handleStatus(row)">{{row.state===1 ? '禁用' : '启用'}}</el-button>
              <el-button ref="editBtn" :disabled="row.state===1" type="text" @click="handleEdit(row)">修改</el-button>
              <el-button ref="delBtn" :disabled="row.state===1" type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="paginationcss">
          <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[5, 8 ,9, 10]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="counts">
          </el-pagination>
        </div>

      </div>
    </el-card>
    <!-- 弹框的展示 -->
    <tagesAdd ref="childNodes" :isLoading.sync="isLoading" :dialogVisible.sync="dialogVisible" :nodeDate.sync="nodeDate" :addTitle="addTitle" :tableDataTwo.sync="tableDataTwo"></tagesAdd>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/tags.js'
import { status } from '@/api/hmmm/constants.js'
import tagesAdd from '../components/tags-add.vue'
export default {
  name: 'tages',
  data () {
    return {
      form: {
        tagName: ''
      },
      title: '',
      tableData: [],
      tableDataTwo: [],
      counts: 0,
      totals: 0,
      page: 1,
      pagesize: 10,
      able: '启用',
      state: 1,
      isDisabled: false,
      dialogVisible: false,
      nodeDate: {},
      addTitle: '',
      value: '',
      options: status,
      isLoading: false,
      list: []
    }
  },
  components: {
    tagesAdd
  },
  computed: {
    id () {
      return this.$route.query.id
    },
    name () {
      return this.$route.query.name
    }
  },
  created () {
    this.getTagsList()
    if (this.id) {
      this.subjectsList()
    }
  },
  methods: {
    // 清除数据
    clearFn () {
      this.form = {
        page: 1,
        pagesize: 10,
        tagName: '',
        state: '',
        subjectID: ''
      }
      this.value = ''
    },
    // 搜索的判断
    async searchValue () {
      if (this.id) {
        const { data } = await list({ tagName: this.form.tagName, state: this.value, page: this.page, pagesize: this.pagesize, subjectID: 16 })
        this.tableDataTwo = data.items
        this.title = `数据一共有${data.counts}条`
        this.totals = data.counts
      } else {
        if (this.value === '') {
          const { data } = await list({ tagName: this.form.tagName, page: this.page, pagesize: this.pagesize })
          this.title = `数据一共有${data.counts}条`
          this.counts = data.counts
          this.tableData = data.items
        } else {
          const { data } = await list({ tagName: this.form.tagName, state: this.value, page: this.page, pagesize: this.pagesize })
          this.tableData = data.items
          this.title = `数据一共有${data.counts}条`
          this.counts = data.counts
        }
      }
    },
    // 获取标签列表
    async getTagsList () {
      this.isLoading = true
      const { data } = await list({ page: this.page, pagesize: this.pagesize })
      this.tableData = data.items
      this.title = `数据一共有${data.counts}条`
      this.counts = data.counts
      this.isLoading = false
    },
    // 状态的切换
    async handleStatus(row) {
      if (row.state === 1) {
        await changeState({ id: row.id, state: 0 })
        row.state = 0
        this.$message.success('禁用启动成功！')
      } else {
        await changeState({ id: row.id, state: 1 })
        row.state = 1
        this.$message.success('开启启动成功！')
      }
    },
    // 点击按钮进行修改
    handleEdit (row) {
      this.dialogVisible = true
      this.addTitle = '修改弹框'
      this.nodeDate = row
    },
    // 点击按钮进行删除
    handleDelete (row) {
      this.$confirm('你确定要删除吗？', '温馨提示')
        .then(async _ => {
          if (this.id) {
            await remove(row)
            this.$message.success('删除成功！')
            const { data } = await list({ page: 1, pagesize: 500, subjectID: 16 })
            this.tableDataTwo = data.items
            this.title = `数据一共有${data.counts}条`
            this.totals = data.counts
          } else {
            await remove(row)
            this.$message.success('删除成功！')
            console.log(this.counts)
            console.log(this.page)
            console.log(this.counts % this.page)
            if (this.page > 1 && this.tableData.length === 1) {
              this.page--
            }
            this.getTagsList()
          }
        })
        .catch(() => {})
    },
    // 改变页容量
    async handleSizeChange (val) {
      this.pagesize = val
      this.handleCurrentChange(1)
    },
    // 改变页码
    async handleCurrentChange (val) {
      this.page = val
      this.getTagsList()
    },
    // 返回标签
    formFn () {
      this.$router.push('/subjects/list')
    },
    // 自定义序号
    indexMethod (index) {
      return index + 1 + (this.page - 1) * this.pagesize
    },
    // 添加框的显示
    addShowDialog () {
      this.dialogVisible = true
      if (this.id) {
        this.addTitle = '新增弹框'
      } else {
        this.addTitle = '添加弹框'
      }
    },
    // 从学科获取列表方法
    async subjectsList () {
      const { data } = await list({ page: this.page / 1, pagesize: this.pagesize / 1, subjectID: 16 })
      this.page = data.page / 1
      this.pagesize = data.pagesize / 1
      this.totals = data.counts
      this.title = `数据一共有${this.totals}条`
      this.tableDataTwo = data.items
    },
    // 子组件获取id的方法
    isChildrenForm () {
      return this.$route.query.id
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-breadcrumb__inner a,
::v-deep .el-breadcrumb__inner.is-link {
   color: #606266 ;
}
.paginationcss {
  display: flex;
  margin-top: 20px;
  justify-content: flex-end;
  align-items: center;

}

.table-box {
  margin-top: 5px;
}

</style>
